<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
    />
    <title>我的商友录</title>
    <link rel="stylesheet" href="../common/css/reset.css" />
    <link rel="stylesheet" href="../common/css/common-m.css" />
    <link rel="stylesheet" href="../common/css/vant.css" />
    <link rel="stylesheet" href="./css/index-vw.css" />
    <!-- <link rel="stylesheet" href="./css/index.css" /> -->
  </head>
  <body>
    <div id="app" v-cloak>
      <div class="fixed-top">
        <!-- 头部 -->
        <header class="header flex center">
          <p class="page-title">我的商友录</p>
          <img
            src="./images/icon-back.png"
            class="icon-back"
            @click="handleBack"
          />
        </header>
        <!-- 筛选 -->
        <section class="section-filter flex around">
          <div
            class="section-filter-item flex"
            :class="{'active': showFilter.area }"
            @click="handleShowFilter('area')"
          >
            地区
            <img src="./images/icon-down.png" class="icon-down icon" />
            <img
              src="./images/icon-down-active.png"
              class="icon-down icon-active"
            />
          </div>
          <div
            class="section-filter-item flex"
            :class="{'active': showFilter.industry }"
            @click="handleShowFilter('industry')"
          >
            行业
            <img src="./images/icon-down.png" class="icon-down icon" />
            <img
              src="./images/icon-down-active.png"
              class="icon-down icon-active"
            />
          </div>
        </section>
      </div>
      <div
        class="filter-container"
        :class="{'show': showFilter.area || showFilter.industry}"
      >
        <div
          id="filterAreaPanel"
          class="filter-panel"
          :class="{'show': showFilter.area, 'anim': animFilter.area }"
        >
          <div class="filter-list cate flex wrap">
            <div class="filter-column">
              <div
                class="filter-item"
                :class="{active: filterSelected.province === ''}"
                @click="handleFilterItemClick('province', '')"
              >
                <p class="ellipsis">不限地区</p>
              </div>
              <div
                class="filter-item"
                :class="{active:  filterSelected.province === item.code}"
                v-for="item in filterAreaList"
                :key="item.code"
                @click="handleFilterItemClick('province',item.code)"
              >
                <p class="ellipsis">{{item.name}}</p>
              </div>
            </div>
            <div class="filter-column">
              <div
                class="filter-item"
                :class="{active: filterSelected.city === ''}"
                @click="handleFilterItemClick('city', '')"
              >
                <p class="ellipsis">全部</p>
              </div>
              <template
                v-if="filterAreaList.find(item => item.code ===filterSelected.province)"
              >
                <div
                  class="filter-item"
                  :class="{active:  filterSelected.city === item.code}"
                  v-for="item in filterAreaList.find(item => item.code ===filterSelected.province).children"
                  :key="item.code"
                  @click="handleFilterItemClick('city', item.code)"
                >
                  <p class="ellipsis">{{item.name}}</p>
                </div>
              </template>
            </div>
          </div>
          <div class="button-box flex around">
            <div class="button-text" @click="reset('area')">重置</div>
            <div class="button button-blue" @click="submit('area')">确认</div>
          </div>
        </div>
        <div
          id="filterIndustryPanel"
          class="filter-panel"
          :class="{'show':  showFilter.industry, 'anim': animFilter.industry}"
        >
          <div class="filter-list cate flex wrap">
            <div
              class="filter-item"
              :class="{active: filterSelected.industry === ''}"
              @click="handleFilterItemClick('industry',  '')"
            >
              <p class="ellipsis">全部</p>
            </div>
            <div
              class="filter-item"
              v-for="item in filterIndustryList"
              :key="item.id"
              :class="{active: filterSelected.industry === item.id}"
              @click="handleFilterItemClick('industry',  item.id)"
            >
              <p class="ellipsis">{{item.name}}</p>
            </div>
          </div>
          <div class="button-box flex around">
            <div class="button-text" @click="reset('industry')">重置</div>
            <div class="button button-blue" @click="submit('industry')">
              确认
            </div>
          </div>
        </div>
      </div>
      <div class="page-container">
        <!-- list -->
        <section class="section-list">
          <div class="list">
            <div v-for="item in cardList" :key="item.id" class="item">
              <div class="flex align-end">
                <div class="text-name ellipsis">{{item.name}}</div>
                <div class="text-position ellipsis">{{item.position}}</div>
              </div>
              <div class="text-company ellipsis">{{item.company}}</div>
              <div class="text-desc-box">
                <div class="text-desc-item flex">
                  <img src="./images/icon-phone.png" class="icon" />
                  <p class="text-desc ellipsis">
                    {{item.phone || '信息待完善'}}
                  </p>
                </div>
                <div class="text-desc-item flex">
                  <img src="./images/icon-cate.png" class="icon" />
                  <p class="text-desc ellipsis">
                    {{item.industry || '信息待完善'}}
                  </p>
                </div>
                <div class="text-desc-item flex">
                  <img src="./images/icon-pos.png" class="icon" />
                  <p class="text-desc ellipsis">
                    {{item.address || '信息待完善'}}
                  </p>
                </div>
                <div class="text-desc-item flex">
                  <img src="./images/icon-desc.png" class="icon" />
                  <p class="text-desc ellipsis">
                    {{item.desc || '信息待完善'}}
                  </p>
                </div>
              </div>

              <div
                class="button button-blue button-contact"
                @click="handleInquiry(item)"
              >
                立即联系
              </div>
              <img
                src="./images/icon-delete.png"
                class="icon-delete"
                @click="handleDelete(item)"
              />
            </div>
          </div>
        </section>
        <!-- 加载中的提示 -->
        <p class="text-tip">{{tipText}}</p>
      </div>

      <!-- 留言 -->
      <van-popup
        v-model="showDialogMessage"
        closeable
        close-icon="close"
        position="bottom"
        round
        :style="{ height: '30%' }"
      >
        <p class="popup-title">留言询盘</p>
        <form class="form message">
          <div class="form-item input">
            <label for="name">联系人</label>
            <input
              type="text"
              placeholder="请输入联系人姓名"
              v-model="formMessage.name"
            />
          </div>
          <div class="form-item input">
            <label for="phone">联系电话</label>
            <input
              type="text"
              placeholder="请输入联系电话"
              v-model="formMessage.phone"
            />
          </div>
          <div class="form-item textarea">
            <label for="desc">补充内容</label>
            <textarea
              id="desc"
              placeholder="填写想要了解的物资信息，如产品规格、价格、数量等"
              v-model="formMessage.desc"
              maxlength="200"
            ></textarea>
            <div class="text-count">{{formMessage.desc.length}}/200</div>
          </div>
          <div class="form-item">
            <div class="button primary" @click="onSubmitMessage">提交留言</div>
          </div>
        </form>
      </van-popup>
    </div>

    <script src="../common/js/jquery-3.2.1.min.js"></script>
    <script src="../common/js/vue.min.js"></script>
    <script src="../common/js/vant.min.js"></script>
    <script src="./js/ajax.js"></script>
    <script src="./js/index.js"></script>
  </body>
</html>
